<template lang="html">
  <div id="pageBox">
    <div class="tabBox">
      <ul class="tabList">
        <li class="tabItem" :class="{active:activeComputed==i+1}" v-for="(v,i) in navList">
          <span @click="tabChange(i)">{{v}}</span>
        </li>
      </ul>
      <span class="tabHk" :class="'tabHk'+activeComputed"></span>
    </div>
  </div>
</template>

<script>
export default {
  props:["navList", 'active'],
  data(){
    return {
			pageLoading:true,
    }
	},
	computed:{
		activeComputed() {
			return this.active
		}
  },
  methods:{
    tabChange(num){
			console.log(num+1, this)
			this.$emit('tabChange', num+1)
    }
  },
  
}
</script>

<style lang="less" scoped>
  #pageBox{
		.tabBox{
			position: relative;
      border-bottom:1px solid #dedede;
			.tabList{
				display: flex;
				.tabItem{
					flex:1;
					text-align: center;
					height:0.48rem;
					color:#666;
					line-height: 0.48rem;
					&.active{
						color:#31c27c;
					}
					span{
						display: inline-block;
						height:100%;
					}
				}
			}
			.tabHk{
				position:absolute;
				height:4px;
				background:#31c27c;
				width:20px;
				margin-left:-10px;
				bottom:0;
				transition: all ease-out 200ms;
			}
			.tabHk1{
				left:25%;
			}
			.tabHk2{
				left:75%;
			}
		}
  }
</style>
